<template>
	<view>
		<u-navbar :title="$t('profile.navText')" placeholder :autoBack="true" />
		<view class="content">
			<view class="profile" @click="setAvatar">
				<image :src="form.avatar"></image>
				<image src="/static/image/photo.png" class="photo"></image>
			</view>
			<view class="box">
				<view class="item">
					<text class="title">{{$t('profile.nickname')}}</text>
					<view style="padding-right: 30rpx;">
						<u--input :placeholder="$t('profile.nameSearch')" color="#818181" border="none" inputAlign="right" v-model="form.nickname"></u--input>
					</view>
				</view>
				<u-action-sheet :actions="sexList" :show="sexShow" cancelText="取消" safeAreaInsetBottom
					@close="sexShow=false" @select="event=>form.gender = event.name == '女' ? 0 : 1"></u-action-sheet>
				<view class="item" @click="sexShow=true">
					<text class="title">{{$t('profile.sex')}}</text>
						<u--text :text="getText('gender')" size="15" align="right" color="#818181" margin="0 15px 0 0" />
				</view>
				<u-datetime-picker :show="birthdayShow" closeOnClickOverlay v-model="birthdayValue" mode="date"
					confirmColor="#FF9A00" @close="birthdayShow=false" @cancel="birthdayShow=false"
					@confirm="birthdayConfirm"></u-datetime-picker>
				<view class="item" @click="birthdayShow=true">
					<text class="title">{{$t('profile.birthday')}}</text>
					<u--text :text="getText('birthday')" align="right" size="15" color="#818181" margin="0 15px 0 0" />
				</view>
				<view class="item">
					<text class="title">{{$t('profile.mobile')}}</text>
					<u--text :text="form.mobile" align="right" size="15" color="#818181" margin="0 15px 0 0"></u--text>
				</view>
			</view>
			<view class="box m-top-10">
				<picker mode="region" @change="event=>form.address=event.detail.value[0]+'/'+event.detail.value[1]+'/'+event.detail.value[2]">
					<view class="autonym" style="border-bottom: 2rpx solid #EEEEEE;">
						<text class="title">{{$t('profile.address')}}</text>
						<u--text :text="getText('address')" align="right" size="15" color="#818181" margin="0 15px 0 0"></u--text>
					</view>
				</picker>
				<view class="autonym" @click="goAutonym">
					<text class="title">{{$t('profile.is_identity')}}</text>
					<u--text :text="getText('is_identity')" align="right" size="15" color="#818181" margin="0 15px 0 0 "></u--text>
				</view>
			</view>
			<u-button :text="$t('profile.amendBtn')" :customStyle="btnStyle" shape="circle" @click="submit"></u-button>
			<u-toast ref="uToast"></u-toast>
		</view>
	</view>

</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				btnStyle: {
					background: "#FFC100",
					color: "#000",
					border: "none",
					width: "530rpx",
					height: "85rpx",
					margin: "130rpx auto"
				},
				sexShow: false, //性别
				birthdayShow: false, //生日
				birthdayValue: Number(new Date()),
				cityPickerValueDefault: [0, 0, 0],
				sexList: [{
						name: '男',
						names:"ئەر",
						fontSize: '20'
					},
					{
						name: '女',
						names:"ئايال",
						fontSize: '20'
					}
				],
				form:{
					avatar: "",//头像
					nickname:"",//昵称
					gender:0,//性别
					birthday:null,//生日
					mobile:"",//手机号
					address:null,//地区
				}
			};
		},
		computed: {
			language() {
				return this._i18n.locale
			},
			...mapGetters(['userInfo'])
		},
		onLoad() {
			this.form.avatar=this.userInfo.avatar
			this.form.nickname=this.userInfo.nickname
			this.form.gender=this.userInfo.gender
			this.form.birthday=this.userInfo.birthday
			this.form.mobile=this.userInfo.mobile
			this.form.address=this.userInfo.address
		},
		methods: {
			...mapActions(['getUserInfo']),
			getText(type){
				switch(type){
					case 'gender':
					if(this.language=='zh'){
						switch(this.form.gender){
							case 0:
							return '女'
							break;
							case 1:
							return '男'
							break;
						}
					}else{
						switch(this.form.gender){
							case 0:
							return 'ئايال'
							break;
							case 1:
							return 'ئەر'
							break;
						}
					}
					break;
					case 'birthday':
						
					if(this.language=='zh'){
						if(this.form.birthday){
							return this.form.birthday
						}else{
							return '请选择生日'
						}
					}else{
						if(this.form.birthday){
							return this.form.birthday
						}else{
							return 'تۇغۇلغان كۈن تاللاڭ'
						}
					}
					break;
					case 'address':
					if(this.language=='zh'){
						if(this.form.address){
							return this.form.address
						}else{
							return '请选择地址'
						}
					}else{
						if(this.form.address){
							return this.form.address
						}else{
							return 'ئادرېسنى تاللاڭ'
						}
					}
					break;
					case 'is_identity':
					if(this.language=='zh'){
						if(this.userInfo.is_identity=='0'){
							return '未认证'
						}else if(this.userInfo.is_identity=='2'){
							return '已认证'
						}else{
							return '审核中'
						}
					}else{
						if(this.userInfo.is_identity=='0'){
							return 'ئىسپات بېرىلمىگەن'
						}else if(this.userInfo.is_identity=='2'){
							return 'ئاللىقاچان ئىسپات بېرىش'
						}else{
							return 'تەكشۈرۈش جەريانىدا'
						}
					}
					break;
				}
			},
			birthdayConfirm(e) {
				this.birthdayShow = false
				this.form.birthday = this.timetrans(e.value)
			},
			setAvatar() {
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.showLoading({
							title: "加载中...",
							mask:true
						})
						uni.uploadFile({
							url: this.$IMG_URL + 'common/upload',
							filePath: tempFilePaths[0],
							header: {
								token: uni.getStorageSync('token')
							},
							name: 'file',
							success: (uploadFileRes) => {
								uni.hideLoading()
								const res = JSON.parse(uploadFileRes.data)
								if (res.code == 1) {
									this.form.avatar = res.data.fullurl
								}
							}
						});
					}
				});
			},
			submit() {
				if(!this.checkMobile(this.form.mobile)) return uni.$u.toast('手机号格式不正确')
				uni.showLoading({
					title: "加载中...",
					mask:true
				})
				this.$http.post('wanlshop/user/editInfo', {
					avatar: this.form.avatar,
					nickname: this.form.nickname,
					gender: this.form.gender == '女' ? 0 : 1,
					birthday: this.form.birthday,
					mobile: this.form.mobile,
					address: this.form.address
				}).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						let token = uni.getStorageSync('token')
						this.getUserInfo(token)
						setTimeout(() => {
							this.$refs.uToast.show({
								type: 'default',
								message: "修改成功",
								duration: 1000,
								complete() {
									uni.navigateBack()
								}
							})
						}, 150)
					}
				})
			},
			goAutonym() {
				switch (this.userInfo.is_identity) {
					case '0':
						uni.$u.route('/pagesA/my/autonym');
						break;
					case '1':
						uni.$u.toast('审核中');
						break;
					case '2':
						uni.$u.toast('已认证');
						break;
				}
			}
		}
	}
</script>
<style>
	page {
		background-color: #f7f7f7;
	}
</style>
<style lang="scss" scoped>
	.content {
		padding: 56rpx 30rpx;

		.profile {
			width: 210rpx;
			height: 210rpx;
			margin: 0 auto 70rpx;
			position: relative;
			image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}

			.photo {
				width: 70rpx;
				height: 70rpx;
				position: absolute;
				right: 0;
				bottom: 0;
			}
		}

		.box {
			box-shadow: 5px 5px 18px 0px rgba(232, 234, 236, 0.51);
			background-color: #fff;
			border-radius: 35rpx;
			padding: 0 36rpx;

			.autonym,
			.item {
				padding: 40rpx 0;
				border-bottom: 2rpx solid #EEEEEE;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.title {
					font-size: 30rpx;
					color: #231916;
				}
			}

			.item:last-child {
				border: none;
			}
			.autonym{
				border: none;
			}
		}
	}
</style>
